<template>
  <div class="app-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="170px"
      style="margin-left:30px;">
      <div>
        <span>OSS上传配置</span>
        <span
          class="form-word-hint">（购买链接：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=eefd5k6n）</span>
        <el-divider></el-divider>
      </div>
      <el-form-item label="ossAccessKeyId" prop="ossAccessKeyId">
        <el-input v-model="ruleForm.ossAccessKeyId" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="ossAccessKeySecret" prop="ossAccessKeySecret">
        <el-input v-model="ruleForm.ossAccessKeySecret" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="ossBucketName" prop="ossBucketName">
        <el-input v-model="ruleForm.ossBucketName" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="OSS是否启用" prop="ossFlag">
        <el-radio-group v-model="ruleForm.ossFlag">
          <el-radio v-for="item in statesList" :key="item.value" :label="item.value">{{item.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <div class="fixed-bottom-20">
          <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {
    Message
  } from 'element-ui'
  import {
    getCodeManager,
    codeToArray
  } from "@/api/all"
  import {
    toEditOss,
    EditOss
  } from '@/api/system'
  export default {
    name: "wxpayconfig",
    data() {
      return {
        statesList: [],
        ruleForm: {},
        rules: {
          ossAccessKeyId: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }],
          ossAccessKeySecret: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }],
          ossBucketName: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }]
        }
      };
    },
    created() {
      getCodeManager("USE_YN", () => {
        this.statesList = codeToArray("USE_YN");
      });
      toEditOss().then(res => {
        this.ruleForm = res.data.data.config
        this.ruleForm.ossFlag = this.ruleForm.ossFlag + ''
      })
    },
    methods: {
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            EditOss(this.ruleForm).then(res => {
              if (!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              return;
            })
          }
        });
      }
    }
  }
</script>

<style>
</style>
